<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始vue</title>
</head>
<script src="../js/vue.js"></script>

<body>
    <!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；
						2.stop：阻止事件冒泡（常用）；
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->  
    <div id="contain" @click="test1">
        <a :href="url" @click.prevent="test1">4399</a>
        <!-- // event.preventDefault();阻止事件默认行为 -->

        <button @click.stop="test1">事件冒泡</button>
        <!-- //阻止事件冒泡 -->

        <!-- //事件只触发一次 -->
        <button @click.once="test1">事件触发</button>
    </div>




    <script>


        new Vue({
            el: '#contain',
            data: {

                name: '黎黎',
                age: '20',
                url: 'https://www.4399.com'
            },
            //没有数据代理
            methods: {
                test1(event) {


                    //event.stop
                    alert('你好');
                },

            }
        });



    </script>
</body>

</html>